ab-mediaquery

AB-mediaQuery

That's the JavaScript side of Media Queries on mobile first projects. It proposes you some very useful methods for your scripts.

Demo: Codepen

NPM: https://www.npmjs.com/package/ab-mediaquery

npm install ab-mediaquery

The plugin is CommonJS and AMD compliant, with no dependencies.

Compatibility

Because of the usage of matchMedia, compatibility start with IE 10. To rise compatibility up to IE 9, you can add https://github.com/paulirish/matchMedia.js/ polyfill.

---

SETUP

There are different ways to setup breakpoints and media queries rules. Default media queries are in em unit, here is why: http://zellwk.com/blog/media-query-units/

Only JS with default settings

Simply call abMediaQuery function with no parameters:

abMediaQuery();

You can go further by changing default settings, see below (More options) for available options.

* small:      screen and (min-width: 0em)
* smallOnly:  screen and (max-width: 47.99em)
* medium:     screen and (min-width: 48em)
* mediumOnly: screen and (min-width: 48em) and (max-width: 64em)
* large:      screen and (min-width: 64.01em)
* largeOnly:  screen and (min-width: 64.01em) and (max-width: 80em)
* huge:       screen and (min-width: 80.01em)
* hugeOnly:   screen and (min-width: 80.01em) and (max-width: 90em)

JS with Sass: The power in your hands ;-)

Sass setup

First, define default media queries rules:

// unit must be in 'em'
$ab-breakpoints: (
  small:  48em,
  medium: 64em,
  large:  80em,
  huge:   90em
);

OPTIONAL: Then you can add your own custom rules (even with other units like px or rem)

$ab-mq-myRules: (
  retina:         'screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
  non-retina:     'not screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
  my-media-query: 'screen and (min-width: 70em)',
  ...
);

Then import _AB-mediaQuery.scss:

@import 'path/to/AB-mediaQuery'

JS setup

Simple call abMediaQuery function with no parameters:

abMediaQuery();

More options

You can change default breakpoints values with bp object and the debounce time on window resize with delay option.

abMediaQuery({
  bp: {
    small:  48em,
    medium: 64em,
    large:  80em,
    huge:   90em
  },
  delay: 200
});

---

USAGE

Get current breakpoints

That will return an array of current breakpoints

AB.mediaQuery.current;

Check specific breakpoint case

Check if window respects the breakpoint specified and return true/false. You can check default media queries generated by the plugin:

• small: All
• smallOnly: Mobiles only
• medium: From tablets
• mediumOnly: Tablets only
• large: From small desktops
• largeOnly: Small desktops only
• huge: From large desktops
• hugeOnly: Large desktops only

But also your custom rules define in your Sass through $ab-mq-myRules variable will be checked:

AB.mediaQuery.is('media-query-name-you-want-to-check);

JS event

'changed.ab-mediaquery' event is automatically triggered when breakpoints change:

window.addEventListener('changed.ab-mediaquery', function(){
  ...
});

Return media query rule from breakpoint name

AB.mediaQuery.get('small');